<template>
  <!-- 标题新增和修改弹窗 -->
  <div class="dialog_content">
    <el-dialog class="m_dialog" :title="title" :visible.sync="dialogVisible" width="800" append-to-body :before-close="cancelDetail" :close-on-click-modal="false">
      <div class='content'>
        <el-form ref="tabForm" :model="formModel" label-width="80px" size="small">
          <el-form-item label="用户组编号">
            <el-input v-model="formModel.labelCode" placeholder="请输入四位数编号"></el-input>
          </el-form-item>
          <el-form-item label="用户组名称">
            <el-input v-model="formModel.labelName" placeholder="请输入用户组名称"></el-input>
          </el-form-item>
          <el-form-item label="通知对象类型" label-width="100px">
            <el-select v-model="formModel.noticeType">
              <el-option v-for="dict in dict.type.label_notice_type" :key="dict.value" :label="dict.label" :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDetail" class="btn_cancel">取 消</el-button>
        <el-button type="primary" @click="submitFrom('tabForm')" class="btn_primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addLabel, updateLabel, delLabel, getLabelList, getLabel, } from '@/api'
export default {
  dicts: ['label_notice_type'],
  props: [
    "dialogVisible", "title", "descData",
  ],
  data () {
    return {
      // 表单数据
      formModel: {
        labelName: undefined,
        labelId: undefined,
        labelCode: undefined,
        noticeType: undefined
      },
    };
  },
  computed: {},
  watch: {
    descData: function (val) {
      console.log(val)
      this.formModel = val
    }
  },
  methods: {
    // 关闭当前弹窗
    cancelDetail () {
      this.$emit('cancelDetail');
    },
    initTableList () {
      this.$emit('initTableList');
    },
    // 加载角色列表
    // initgetLabelList () {
    //   getLabelList()
    // },
    submitFrom (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.formModel.labelId !== undefined) {
            updateLabel(this.formModel).then(response => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.cancelDetail()
              this.initTableList()
            })
          } else {
            addLabel(this.formModel).then(response => {
              if (response.code === 200) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: response.msg,
                  type: "error",
                });
              }
              this.cancelDetail()
              this.initTableList()
            })
          }
        }
      })
    },
  },
  created () {
    // this.initgetLabelList()
  },
  mounted () {

  },
  components: {},
}
</script>

<style lang='less' scoped>
.flex-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  span.el-tag {
    color: rgb(142, 170, 190);
    margin-right: 5px;
  }
}
</style>